import '@umijs/max';
import React from 'react';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';

export type FormProps = {
  onFinish: (values: API.InterfaceInfo) => Promise<void>;
  open: boolean;
  onOpenChange: (visible: boolean) => void;
  title: string;
  initialValues?: API.InterfaceInfo;
};
const CreateUpdateForm: React.FC<FormProps> = (props) => {
  const { onFinish, open, onOpenChange, initialValues, title } = props;
  return (
    <ModalForm
      title={title}
      width="800px"
      open={open}
      onOpenChange={onOpenChange}
      initialValues={initialValues}
      onFinish={async (value) => {
        console.log(initialValues);
        onFinish?.(value);
      }}
      modalProps={{ destroyOnClose: true }}
    >
      <ProForm.Group>
        <ProFormText label="ID" width="md" name="id" hidden={true} />
        <ProFormText
          label="名称"
          rules={[
            {
              required: true,
              message: '接口名称为必填项',
            },
          ]}
          width="md"
          name="name"
        />
        <ProFormText
          label="URL"
          rules={[
            {
              required: true,
              message: 'URL为必填项',
            },
          ]}
          width="md"
          name="url"
        />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormTextArea label="描述" width="xl" name="description" />
      </ProForm.Group>
      <ProForm.Group>
        <ProFormSelect
          label="状态"
          width="md"
          name="status"
          options={[
            {
              value: 0,
              label: '关闭',
            },
            {
              value: 1,
              label: '开启',
            },
          ]}
        />
        <ProFormSelect
          label="请求方法"
          options={[
            {
              value: 'GET',
              label: 'GET',
            },
            {
              value: 'POST',
              label: 'POST',
            },
          ]}
          rules={[
            {
              required: true,
              message: '请求方法为必填项',
            },
          ]}
          width="md"
          name="method"
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default CreateUpdateForm;


/*
import '@umijs/max';
import React from 'react';
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { Modal } from 'antd';

export type CreateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.InterfaceInfo) => void;
  onSubmit: (values: API.InterfaceInfo) => Promise<void>;
  createModalOpen: boolean;
  columns: ProColumns<API.InterfaceInfo>[];
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
  const { onCancel, onSubmit, createModalOpen, columns } = props;
  return (
    <Modal open={createModalOpen} onCancel={() => onCancel?.()}>
      <ProTable columns={columns} type="form" onSubmit={async (value) => onSubmit?.(value)} />
    </Modal>
  );
};
export default CreateForm;
 */
